//带样式的组件 同级别加&
import styled from 'styled-components';
import navLogo from '../statics/nav-logo.png';

export const HeaderWrapper = styled.div`
	position: relative;
	height: 56px;
	border-bottom: 1px solid #f0f0f0;
`;
//attrs传入对象 对象为标签的属性
//background-size: contain; 注意百度
//background: url(${navLogo}); 引入取值 不能直接写地址
export const Logo = styled.a.attrs({
	href:'/'
})`
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 56px;
	width: 100px;
	background: url(${navLogo});
	background-size: contain;
`;

//box-sizing: border-box; 盒子宽度为960  不会额外加上 padding 和 margin 的大小
export const Nav = styled.div`
	width: 960px;
	height: 100%;
	padding-right: 70px;
	box-sizing: border-box;
	margin: 0 auto;
`;

//&.代表当前组件的className 有这个属性名称
export const NavItem = styled.div`
	line-height: 56px;
	padding: 0 15px;
	font-size: 17px;
	color: #333;
	&.left{
		float: left;
	}
	&.right{
		float: right;
		color: #969696;
	}
	&.active{
		color: #ea6f5a;
	}
`;

//border-radius: 19px; 圆角
//&:: 代表标签属性
//slide动画效果用到技术react-transition-group
export const NavSearch = styled.input.attrs({
	placeholder:'搜索'
})`
	width: 160px;
	height: 36px;
	padding: 0 20px;
	margin-left: 20px;
	box-sizing: border-box;
	border: none;
	outline: none;
	margin-top: 9px;
	border-radius: 19px;
	background: #eee;
	font-size: 14px;
	&::placeholder{
		color: #999;
	}
	&.focused{
		width: 240px;
	}
	&.slide-enter{
		transition: all .3s ease-out;
	}
	&.slide-enter-active{
		width:240px;
	}
	&.slide-exit{
		transition: all .3s ease-out;
	}
	&.slide-exit-active{
		width:160px;
	}
`;

export const Addition = styled.div`
	position: absolute;
	right: 0;
	top: 0;
	height: 56px;
`;

export const Button = styled.div`
	float: right;
	margin-top: 9px;
	margin-right: 20px;
	padding: 0 20px;
	line-height: 38px;
	border-radius: 19px;
	border: 1px solid #ec6194;
	font-size: 14px;
	&.reg{
		color: #ea6f5a;
	}
	&.writting{
		color: #fff;
		background: #ea6f5a;
	}
`;

export const SearchWrapper = styled.div`
	position: relative;
	float: left;
	.iconfont{
		position:absolute;
		right: 3px;
		bottom: 3px;
		width: 30px;
		line-height: 30px;
		border-radius 15px;
		text-align: center;
	}
	.focuseds{
		background: #777;
		color: #fff;
	}
`;
